<template>
  <a-modal
    title="合同选择"
    :visible="visible"
    class="large-modal"
    @ok="handleOk"
    @cancel="visible=false"
  >
    <searchData
      :search-data="searchArr"
      @search="search"
    />
    <a-table
      :loading="loading"
      :pagination="false"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,type:'radio'}"
      :columns="columns"
      :data-source="tableData"
      row-key="id"
    >
      <span
        slot="num"
        slot-scope="text, record, index"
      >{{ index + 1 }}</span>
    </a-table>
    <pagination
      v-model="pageNo"
      :total="totalSize"
      :page-size.sync="pageSize"
      @change="handlePageChange"
      @showSizeChange="showSizeChange"
    />
  </a-modal>
</template>
<script>
import { materialContractList } from '@/api/material/settlement/settlement'

export default {
  name: 'a' + Date.now(),
  props: {
    otherParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data: function() {
    return {
      loading: false,
      pageNo: 1,
      pageSize: 10,
      queryParam: {},
      totalSize: 0,
      visible: false,
      tableData: [],
      columns: [
        { title: '序号', width: 70, scopedSlots: { customRender: 'num' } },
        { title: '合同名称', dataIndex: 'name', width: 200,  ellipsis: true,},
        { title: '合同编号', dataIndex: 'code', width: 200,ellipsis: true,},
        { title: '项目名称', dataIndex: 'projectName', width: 200,ellipsis: true,},
        { title: '供应商名称', dataIndex: 'supplier', width: 200,  ellipsis: true,},
        { title: '合同来源', dataIndex: 'fromStatusName', width: 100,  ellipsis: true,},
        { title: '合同类型', dataIndex: 'typeName', width: 100,ellipsis: true,}
      ],
      searchArr: [
        {
          name: '合同名称',
          value: 'name',
          type: 'input'
        },
        {
          name: '合同编号',
          value: 'code',
          type: 'input'
        }
      ],
      selectedRowKeys: [],
      selectRow: null
    }
  },
  methods: {
    open: function() {
      this.visible = true
      this.search()
    },
    handleOk: function() {
      this.visible = false
      this.$emit('getContract', this.selectRow)
    },
    async list(params) {
      let searchData = Object.assign({
        pageSize: this.pageSize,
        pageNo: this.pageNo
      }, params, this.queryParam, this.otherParams)
      this.loading = true
      let res = await materialContractList(searchData)
      this.loading = false
      if (res.code === 200) {
        this.tableData = res.data
        this.totalSize = res.totalSize
      }
    },
    search(val) {
      this.pageNo = 1
      this.queryParam = val
      this.list(val)
    },
    handlePageChange(pageNo, pageSize) {
      this.pageNo = pageNo
      this.list()
      this.selectedRowKeys = []
    },
    showSizeChange(pageNo, pageSize) {
      this.pageNo = 1
      this.pageSize = pageSize
      this.list()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectRow = selectedRows[0]
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>
